<script>
    import { loginUser } from "../../utils/stores";
    import { router } from "../../routes";
    import Button, { Label } from "@smui/button";

    let nickname = window.sessionStorage.getItem("nickname");
    // $: nickname = $loginUser.nickname;

    // 注销登录
    const logout = () => {
        loginUser.set({ id: null, username: null, nickname: null });
        window.sessionStorage.removeItem("nickname");
        window.sessionStorage.removeItem("token");
        router.push("/login");
    };
</script>

<!--头部-->
<div class="header">
    <div style="display: flex; justify-content: space-between;">
        <span class="nickname">{nickname}</span>

        <Button
            style="line-height: 48px; height:48px; padding: 0 20px; color: red;"
            on:click={logout}
        >
            <Label>退出</Label>
        </Button>
    </div>
</div>

<style>
    .header {
        width: auto;
        height: 50px;
        background-color: lightblue;
        align-items: center;
        vertical-align: middle;
    }
    .nickname {
        font-size: 22px;
        color: #3f51b5;
        font-weight: 400;
        line-height: 48px;
        padding: 0 20px;
    }
</style>
